<template>
  <div class="pageFeaturedWrapper">
    <el-row :gutter="30">
      <el-col :md="18" :sm="24" :xs="24">
        <el-row :gutter="32">
          <el-col :span="24">
            <good-box1 class="boxItem" v-bind="data['one']"/>
          </el-col>
          <el-col :md="14" :xs="24">
            <good-box1 class="boxItem" v-bind="data['two']"/>
          </el-col>
          <el-col :md="10" :xs="24">
            <good-box1 class="boxItem" v-bind="data['three']"/>
          </el-col>
        </el-row>
      </el-col>
      <el-col :md="6" :sm="24" :xs="24">
        <good-box1 class="boxItem" style="height:540px" v-bind="data['four']"/>
      </el-col>
    </el-row>
    <el-row :gutter="30" style="margin-top: 30px;">
      <el-col :md="12" :sm="24" :xs="24">
        <good-box1 class="boxItem" v-bind="data['five']"/>
      </el-col>
      <el-col :md="12" :sm="24" :xs="24">
        <good-box1 class="boxItem" v-bind="data['six']"/>
      </el-col>
      <el-col :span="24">
        <good-box1 class="boxItem" style="height: 155px;" v-bind="data['seven']"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import GoodBox1 from '@/components/general/goods/GoodBox1'
import { queryFeaturedVO } from '@/api/ApiPageIndex'
import { ResultCode } from '@/constants/constants'

export default {
  name: 'PageFeatured',
  components: {
    'good-box1': GoodBox1
  },
  data () {
    return {
      queryLoading: false,
      data: {
        one: {},
        two: {},
        three: {},
        four: {},
        five: {},
        six: {},
        seven: {}
      }
    }
  },
  mounted () {
    this.freshData()
  },
  methods: {
    getInitData () {
      return {
        one: {},
        two: {},
        three: {},
        four: {},
        five: {},
        six: {},
        seven: {}
      }
    },
    convertData (list) {
      const data = {}
      if (list && typeof list === 'object') {
        list.forEach(item => {
          const position = item['position']
          if (position) {
            data[position] = item
          }
        })
      }
      return data
    },
    freshData () {
      if (this.queryLoading) {
        return
      }
      this.queryLoading = true
      queryFeaturedVO(false, data => {
        if (data && data.code === ResultCode.OK) {
          data = data.object
          let temp = this.getInitData()
          if (data && typeof data === 'object' && data.length > 0) {
            const convert = this.convertData(data)
            temp = Object.assign(temp, convert)
          }
          this.data = temp
        }
      }, () => {
        this.queryLoading = false
      })
    },
    show (val) {
      this.$message({
        message: 'show ' + val,
        type: 'success'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .pageFeaturedWrapper{
    .boxItem{
      margin-bottom: 30px;
      height: 255px;
    }
  }
</style>
